"use client";

import { Button } from "@heroui/button";

import "highlight.js/styles/github.css";

export default function CollaborativeEditor() {
  return (
    <div>
      <div className="mb-4">
        <Button className="mr-3" color="primary" size="sm">
          保存文档
        </Button>
        <Button color="danger" size="sm">
          添加协作者
        </Button>
      </div>
      <div className="mb-4">
        <span className="text-sm text-gray-500 mb-4">该文档协作者：</span>
        <div className="flex gap-2 items-center mt-2">
          <span className="text-sm text-gray-400">暂无协作者</span>
        </div>
      </div>
      <div className="grid grid-cols-2 gap-6">
        <div className="flex flex-col h-full bg-white border rounded shadow-sm">
          <h2 className="text-lg font-semibold p-4 border-b">编辑区</h2>
          <div>编辑器</div>
        </div>
        <div className="flex flex-col h-full bg-white border rounded shadow-sm">
          <h2 className="text-lg font-semibold p-4 border-b">预览区</h2>
          <div className="prose prose-sm max-w-none flex-1 overflow-auto p-4">
            <div>预览</div>
          </div>
        </div>
      </div>
    </div>
  );
}
